<template>
    <div>
      <div class=" p-6">
        <!-- 总数据 -->
        <div class=" text-slate-300 text-center">
          数据总量：
          <span ref="totalCountTarget" class="text-gradient font-[Electronic]  text-7xl ml-2 mr-2 font-bold">
            {{props.data.total}}
          </span>
          条记录
        </div>
  
        <!-- 其他数据 -->
        <div class=" mt-3 flex flex-wrap">
          <div class=" w-1/3 text-center text-slate-400 text-sm">
            华北：<span ref="city1" class="font-[Electronic] text-[#5dc5ef] text-3xl">{{props.data.hb}}</span>
          </div>
          <div class=" w-1/3 text-center text-slate-400 text-sm">
            东北：<span ref="city2" class="font-[Electronic] text-[#5dc5ef] text-3xl">{{props.data.db}}</span>
          </div>
          <div class=" w-1/3 text-center text-slate-400 text-sm">
            华东：<span ref="city3" class="font-[Electronic] text-[#5dc5ef] text-3xl">{{props.data.hd}}</span>
          </div>
          <div class=" w-1/3 text-center text-slate-400 text-sm">
            中南：<span ref="city4" class="font-[Electronic] text-[#5dc5ef] text-3xl">{{props.data.zn}}</span>
          </div>
          <div class=" w-1/3 text-center text-slate-400 text-sm">
            西南：<span ref="city5" class="font-[Electronic] text-[#5dc5ef] text-3xl">{{props.data.xn}}</span>
          </div>
          <div class=" w-1/3 text-center text-slate-400 text-sm">
            西北：<span ref="city6" class="font-[Electronic] text-[#5dc5ef] text-3xl">{{props.data.xb}}</span>
          </div>
  
        </div>
        
      </div>
    </div>
  </template>
  
  <script setup>
  import {CountUp} from 'countup.js'
  import { ref ,onMounted } from 'vue'
  const props = defineProps({
    data: {
      type: Object,
      required:true
    }
  })
  
  const totalCountTarget = ref(null)
  const city1 = ref(null)
  const city2 = ref(null)
  const city3 = ref(null)
  const city4 = ref(null)
  const city5 = ref(null)
  const city6 = ref(null)
  
  onMounted(() => {
    console.log("数据总览",props.data)
    new CountUp(totalCountTarget.value,props.data.total).start()
    new CountUp(city1.value,props.data.hb).start()
    new CountUp(city2.value,props.data.db).start()
    new CountUp(city3.value,props.data.hd).start()
    new CountUp(city4.value,props.data.zn).start()
    new CountUp(city5.value,props.data.xn).start()
    new CountUp(city6.value,props.data.xb).start()
  })
  
  </script>
  
  <style lang="scss" scoped>
  
  </style>